<template>
  <transition name="judge">
      <div ref="kefu" v-if="flag" class="kefu">
            <div @click="cencel" class="top">

            </div>
            <div ref="bottom" class="bottom">
                <div>在线客服(08:40-19:00)</div>
                <div style="margin-bottom:.2rem">意见反馈</div>
                <div style="min-height:1.2rem">取消</div>
            </div>
        </div>
  </transition>
</template>

<script>
export default {
    data(){
        return{
            flag:true,
        }
    },
    methods:{
        cencel(){
            this.flag=false
            this.$refs.kefu.style["background-color"]= "rgba(0,0,0,0)";
            this.$refs.bottom.style.height= 0;
            this.$refs.bottom.style.transition="all .8s"
            this.$refs.kefu.style.transition="all .8s"
        }
    }
}
</script>

<style scoped>
.judge-enter{
    height: 0;
}
.judge-enter-active{
     transition: all 1s;
}
.judge-enter-to{
    height: 100%;
}
.judge-leave{
    height: 100%;
}
.judge-leave-active{
    transition: all 1s;
}
.judge-leave-to{
    height: 0;
}
.kefu{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2020;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}
.top{
    width: 100%;
    flex: 1;
}
.bottom{
    width: 100%;
    height: 3rem;
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;
    border-radius: .3rem;
    position: absolute;
    bottom: -.3rem;
    z-index: 3;
    left: 0;
}
.bottom>div{
    flex: 1;
    text-align: center;
    line-height: .8rem;
    font-size: .35rem;
     border-radius: .3rem;
    background-color: white;
}
</style>